<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" :scrollable="false" lineWidth="15" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="list1" @change="tabChage"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<view class="mainpadding_top bghui titletext huang_text bold flexcenter">累计获得奖金：$23782783</view>
			<!-- 进行中 -->
			<template v-if="tabsId==1">
				
				<view class="mainpadding_top ffffff radius" style="position: relative;padding-top: 90rpx;">
					<view class="daojishi flexleft">
						<view class="huang_text main_size bold">距结束还剩：</view>
						<u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
					</view>
					<view class="flexbetween">
						<view class="titletext hei_text bold xiankuan">完成2309单</view>
						<view class="huang_text main_sise bold">$23</view>
					</view>
					<view class="flexbetween bghui margin_top radius" style="padding: 20rpx 30rpx;">
						<view>
							<text class="xiaohui">目标：</text>
							<text class="xiaohuang">20单</text>
						</view>
						<view>
							<text class="xiaohui">完成：</text>
							<text class="xiaolv">2单</text>
						</view>
						<view>
							<text class="xiaohui">剩余：</text>
							<text class="xiaohuang">20单</text>
						</view>
					</view>
				</view>
			</template>
			<!-- 已结束 -->
			<template v-if="tabsId==2">
				<view class="mainpadding_top ffffff radius">
					<view class="flexbetween pdl">
						<view class="titletext hei_text bold">2023-02-23至2323-23-23</view>
						<!-- <view class="xiaolv">已完成</view> -->
						<view class="xiaohong">未完成</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="main_size hei_text bold xiankuan">完成2309单</view>
						<view class="huang_text main_sise bold">$23</view>
					</view>
					<view class="flexbetween bghui margin_top radius" style="padding: 20rpx 30rpx;">
						<view>
							<text class="xiaohui">目标：</text>
							<text class="xiaohuang">20单</text>
						</view>
						<view>
							<text class="xiaohui">完成：</text>
							<text class="xiaolv">2单</text>
						</view>
						<view>
							<text class="xiaohui">剩余：</text>
							<text class="xiaohuang">20单</text>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1:[{
					name:"进行中",
					id:1,
				},
				{
					name:"已结束",
					id:2,
				}],
				tabsId: 1 ,
			}
		},
		methods: {
			tabChage(e) {
				this.tabsId = e.id
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-count-down__text{
		color: #ffb800;
	}
	.daojishi{
		position: absolute;
		left: 0;
		border-radius: 10rpx 10rpx 10rpx 0;
		padding: 15rpx 30rpx;
		top: 0;
		background-color: #fff8e7;
	}
</style>
